<template>
	<view class="bigbox">
		<view class="pic1" v-if="!binded">
		<!--默认车辆图片 -->
		<image class="deflut" src="../../static/图层2.png" mode="" ></image>
		</view>
		<view class="">
			<!-- “剩余油量”、“续航里程” -->
			<!-- 每个信息包含图标、标题、数值。 -->
			<view class="" v-if="binded">
				<text>型号: BYD</text>
				<view class="pic1">
					<image class="deflut" src="../../static/图层1.png"></image>
				</view>
				<!-- 信息组 -->
				<view class="message">
					<!-- 剩余油量信息 -->
					<view class="">
						<!-- 左侧内容 -->
						<view class="">
							<image src="../../static/logo.png" mode="" class="icon"></image>
							<text>剩余油量</text>
						</view>
						<text class="wenzi">100L</text>
					</view>
					<!-- 续航里程信息 -->
					<view class="">
						<!-- 左侧内容 -->
						<view class="">
							<image src="../../static/logo.png" mode="" class="icon"></image>
							<text>续航里程</text>
						</view>
						<text class="wenzi">200km</text>
					</view>
				</view>
				<!-- 车辆控制按钮组 -->
				<view class="lan">
					<!-- 控制按钮 -->
					<view class="lan-item" v-for="(item, index) in controllerBtn" :key="index" @click="item.onClick">
						<image :src="item.icon" mode="" class="icon"></image>
						<text class="lable">{{item.title}}</text>
					</view>
				</view>
			</view>
			<!--  车辆控制 -->
			<!-- “发动机”、“车锁”、“空调”、“车窗”等，每个模块按钮包
			// 含图标和文字，采用上图下文方式展示，每行展示4个模块，超出部
			// 分可以通过左右滑动形式进行切换展示。 -->
			<!-- <button type="default" v-if="!binded" @click="binded = !binded">绑定车辆</button> -->
			<button v-if="!binded" class="bindbtn" type="default" @click="binded = !binded">绑定车辆</button>
		</view>
		
		<view class="dibu" >
			<button type="default">远程控制<span>></span></button>
			<button type="default">智能钥匙<span>></span></button>
		</view>

	</view>
</template>

<script>
	// 用户登录成功后，进入车主首页，首页包含“车辆”、“服务”
	// 、“我的”三个模块。其中车辆模块主要实现车辆绑定、车辆远程控
	// 制、智能钥匙等功能。车辆首页根据车辆的绑定状态展示不同的形式。
	// 1.在未绑定车辆状态下，车辆模块首页面顶部展示缺省的车辆图
	// 片，图片下方展示【绑定车辆】按钮。按钮下方展示功能入口，分别
	// 为【远程控制】、【智能钥匙】。
	// 2.在已绑定车辆状态下，车辆模块首页面顶部展示车辆型号、车
	// 辆图片，图片下方展示车辆的“剩余油量”、“续航里程”信息，每
	// 个信息包含图标、标题、数值。信息下方展示车辆的模块控制按钮，
	// 如“发动机”、“车锁”、“空调”、“车窗”等，每个模块按钮包
	// 含图标和文字，采用上图下文方式展示，每行展示4个模块，超出部
	// 分可以通过左右滑动形式进行切换展示。控制按钮下方展示三个功能
	// 入口，分别为【远程控制】、【智能钥匙】

	function NullFunction() {

	}

	export default {
		data() {
			return {
				binded: false,
				controllerBtn: [{
						title: "发动机",
						icon: "../../static/logo.png",
						onClick: NullFunction,
					},
					{
						title: "车锁",
						icon: "../../static/logo.png",
						onClick: NullFunction,
					},
					{
						title: "空调",
						icon: "../../static/logo.png",
						onClick: NullFunction,
					},
					{
						title: "车窗",
						icon: "../../static/logo.png",
						onClick: NullFunction,
					},
					// {
					// 	title: "测试",
					// 	icon: "../../static/logo.png",
					// 	onClick: NullFunction,
					// }
				]
			}
		},
		methods: {}
	}
</script>

<style scoped>
	page{
		background: linear-gradient(#ffffff 30%,#f5f7fa 70%);
		background-repeat: no-repeat;
	}
	.bigbox{
		height: 100%;
		padding:30rpx;
	}
	.pic1{
		padding:60rpx;
	}
	.deflut{
		width: 500rpx;
		height: 300rpx;
		margin-left: 35rpx;
		margin-bottom: 30rpx;
	}
	
	.bindbtn{
		/* color: #808080;
		font-size: 38rpx; */
		font-size: 26rpx;
		color: #696969;
		margin: 20rpx;
		
	}
	.dibu{
		margin-top: 60rpx;
		display: flex;
		justify-content: space-between;
	}
	.dibu>button{
		border-radius: 25rpx;
		text-align: left;
		height: 300rpx;
		flex: 1;
		background-color: #fff;
		margin:20rpx 20rpx 20rpx 20rpx;
		box-shadow: 0rpx  2rpx 12rpx rgba(0,0,0,0.1);
		color: #808080;
	}
	.dibu>button>span{
		margin-left: 90rpx;
		color: #8F8F94;
	}
	.lan{
		display: flex;
		justify-content: space-between;
		line-height: 160rpx;
		height: 160rpx;
		text-align: center;
		/* background-color: #fff;
		box-shadow: 0rpx  2rpx 12rpx rgba(0,0,0,0.1); */
		border-radius: 20rpx;
		margin:100rpx 20rpx 10rpx;
	}
	.lan-item{
		height: 160rpx;
		line-height: 160rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 5rpx 50rpx;
		background-color: #fff;
		border-radius: 50rpx;
	
	}
	.icon {
		height: 56rpx;
		width: 56rpx;
	}
	.lable{
		font-size: 20rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.message{
		/* border: 1rpx solid #2C405A; */
		display: flex;
		justify-content: space-between;
		padding: 30rpx 100rpx;
		text-align: center;
	}
	.wenzi{
		font-size: 40rpx;
	}
</style>
